<template>
	<view class="order">
		<view class="left" @tap.stop="back">
			<image src="@/static/home/left.png" mode=""></image>
		</view>
		<view class="textName">
			参数详情
		</view>
		<view class="right">
			<view class="" style="color: #469D96;margin-right: 20rpx;" @tap.stop="toProtect">
				装置详情
			</view>
			<view class="" @tap.stop="previewFn">
				参数附件
			</view>
		</view>
		<!-- 列表 v-for="(item,index) in tabList" :key="index"-->
		<view class="listBox">
			<scroll-view enable-back-to-top=true scroll-y="true" class="scrollHight" :style="{height:height}"
				@scrolltoupper="upper" @scrolltolower="lower" :refresher-enabled="true" :refresher-threshold="100"
				:refresher-triggered="isTriggered" @refresherrefresh="onRefresh" @refresherrestore="onRestore"
				@refresherpulling="onPulling">
				<view class="list">
					<view class="">
						<view class="code" style="font-size: 30rpx;display: flex;">
							<view class="title">设备编号：</view>
							<view class="content">{{allList.id||''}}</view>
						</view>
						<view class="code" style="font-size: 30rpx;display: flex;">
							<view class="title">所属变电站</view>
							<view class="content">{{allList.substationName||''}}</view>
						</view>
						<view class="code" style="font-size: 30rpx;display: flex;">
							<view class="title">设备名称：</view>
							<view class="content">{{allList.deviceName||''}}</view>
						</view>
						<view class="code" style="font-size: 30rpx;display: flex;">
							<view class="title">开关编号：</view>
							<view class="content">{{allList.switchNo||''}}</view>
						</view>
						<view class="code" style="font-size: 30rpx;display: flex;">
							<view class="title">保护型号：</view>
							<view class="content">{{allList.protectDeviceModel||''}}</view>
						</view>
						<view class="code" style="font-size: 30rpx;display: flex;">
							<view class="title">调度名称：</view>
							<view class="content">{{allList.scheduleName||''}}</view>
						</view>
						<view class="code" style="font-size: 30rpx;display: flex;">
							<view class="title">装置版本号：</view>
							<view class="content">{{allList.deviceVersion||''}}</view>
						</view>
						<view class="code" style="font-size: 30rpx;display: flex;">
							<view class="title">校验码：</view>
							<view class="content">{{allList.checkCode||''}}</view>
						</view>
						<view class="code" style="font-size: 30rpx;display: flex;">
							<view class="title">CT变比：</view>
							<view class="content">{{allList.ctTransformationRatio||''}}</view>
						</view>
						<view class="code" style="font-size: 30rpx;display: flex;">
							<view class="title">PT变比：</view>
							<view class="content">{{allList.ptTransformationRatio||''}}</view>
						</view>
					</view>
				</view>

				<u-table class="big" align="center">
					<u-tr>
						<u-th width="15%">序号</u-th>
						<u-th width="39%">名称</u-th>
						<u-th width="26%">定值</u-th>
						<u-th width="20%">操作</u-th>
					</u-tr>
					<u-tr v-for="(i,index) in tableList" :key="index">
						<u-td width="15%">{{i.serialNo}}</u-td>
						<u-td width="39%"
							style="overflow:hidden;white-space: nowrap;text-overflow: ellipsis;">{{i.name}}</u-td>
						<u-td width="26%" style="color:red !important;" @row-click="toTable(i)"
							v-if="i.different == 2">{{i.constantValue}}</u-td>
						<u-td width="26%" style="color:#000 !important;"
							v-if="i.different !=2">{{i.constantValue}}</u-td>
						<u-td width="20%" style="color: #469D96 !important;" v-if="i.constantValue"
							@row-click="toRun(i)">查看备注</u-td>
						<u-td width="20%" style="color: #979797 !important;" v-if="!i.constantValue"
							>暂无</u-td>
					</u-tr>
				</u-table>

				<!-- 提示栏 -->
				<!-- <view style="width: 100%; text-align: center; font-size: 28rpx; margin-top: 30rpx;">{{isText}}</view> -->
			</scroll-view>
		</view>
		<view class="butt" @tap.stop="submi" >
			提交
		</view>
		<u-popup v-model="show" mode="center" border-radius="14" width="680rpx" height="auto">
			<u-table class="small">
				<u-tr>
					<u-th width="15%">数值</u-th>
					<u-th width="35%">日期</u-th>
					<u-th width="48%">字号</u-th>
				</u-tr>
				<u-tr v-for="(item,index) in valueList" :key="index">
					<u-td width="15%">{{item.constantValue}}</u-td>
					<u-td width="35%" >{{item.fileDate}}</u-td>
					<u-td width="48%"  style="white-space: wrap;">{{item.fileNo}}</u-td>
				</u-tr>
			</u-table>
		</u-popup>
		<!-- 在哪里写死的地方 -->
		<u-popup v-model="showRun" mode="center" border-radius="14" width="660rpx" height="auto">
			<u-table class="small">
				<u-tr v-if="remarks.length>=1">
					<u-th  width="15%">备注人</u-th>
					<u-th  width="35%">日期</u-th>
					<u-th  width="35%">备注</u-th>
					<u-th  width="15%">操作</u-th>
				</u-tr>
				<u-tr v-for="(item,em) in remarks" :key="em">
					<u-td width="15%">{{item.nickName}}</u-td>
					<u-td width="35%">{{item.updateTime.split(' ')[0]}}</u-td>
					<u-td width="35%">
						<u-input style="color: #979797;"
						v-model="item.remarks"
						></u-input>
					</u-td>
					<u-td width="15%"><u-button type="success" size="mini" @tap.stop="toSubmit(item)">确定</u-button></u-td>
				</u-tr>
				<u-tr v-if="remarks.length<=1">
					<u-td width="85%">
						<u-input style="color: #979797;"
						v-model="add"
						></u-input>
					</u-td>
					<u-td width="15%"><u-button type="success" size="mini" @tap.stop="toAdd(add)">添加</u-button></u-td>
				</u-tr>
			</u-table>
		</u-popup>
		<u-popup v-model="sub" mode="center" border-radius="14" width="660rpx" height="auto">
			<view class="small">
				<view class=""
					style="width: 80%;height: 100rpx;line-height: 100rpx;text-align: center;background:#469D96;color: white;border-radius: 10px;margin:60rpx auto;"
					@click="handleSignature" v-if="!signature">
					请去签名
				</view>
				<image :src="signature" v-else></image>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import baseUrl from "@/api/base.js"
	import vvSelect from '@/pages/components/vv-select/vv-select.vue'
	export default {
		data() {
			return {
				add:'',
				pdfUrl: null,
				signature: "", //签名图片
				pdfh5: null,
				// 可引入网络文件或者本地文件
				pdfUrl: "http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf",

				content: `
									空山新雨后<br>
									天气晚来秋
								`,
				sub: false,
				value: '',
				show: false,
				image: this.$base.smallimgUrl,
				tabCurrent: 0,
				page: 1,
				isText: '',
				allList: {},
				typeId: '',
				last_page: 1,
				height: this.$utils.height(),
				isTriggered: false, //定义一个用来表示下拉刷新是否被触发，当更新完数据需要重新定义为false
				deviceId: '',
				versionId: '',
				tableList: [],
				user: {},
				protectDeviceId: '',
				showRun: false,
				valueList: [],
				remarks: [],
				parameterDetailsId:''
			};
		},
		components: {
			vvSelect
		},
		onLoad(options) {
			 // options.deviceId 						
			// this.deviceId = '1681496913152884738'
			// this.versionId = '1681503758122790913'
			// this.protectDeviceId = '1681496913022861313'
			this.deviceId = options.deviceId
			this.versionId = options.versionId
			this.protectDeviceId = options.protectDeviceId
			console.log(options, 'options')
			this.getDeviceId()
			this.getVersionId()
		},
		onShow() {
			this.list = []
			this.page = 1
			this.isText = ''
			this.getUserInfo()
			// this.getOrderList()
		},
		methods: {
			toSubmit(item){
				let that = this
				that.$api.updateRemarks(item).then(res => {
					console.log(res.data,'res.data')
					if(res.data) that.showRun = false
					that.getVersionId()
				})
			},
			toAdd(item){
				let that = this
				console.log(that.parameterDetailsId,'that.parameterDetailsId')
				that.$api.addRemarks({
					remarks:item,
					parameterDetailsId:that.parameterDetailsId,
				}).then(res => {
					console.log(res.data,'res.data')
					if(res.data) that.showRun = false
					that.getVersionId()
				})
			},
			getUserInfo() {
				let that = this
				that.$api.getInfo().then(res => {
					that.user = res.data.user
					if(that.user.userType == '02'){
						console.log('userType')
						that.height = uni.getSystemInfoSync().windowHeight - 122 + 'px';
					}else{
						that.height = uni.getSystemInfoSync().windowHeight - 58 + 'px';
					}
					// console.log(that.user,'that.user')
				})
			},

			getDeviceId() {
				let that = this
				that.$api.substationDeviceId(that.deviceId).then(res => {
					that.allList = res.data.data
				})
			},
			getVersionId() {
				let that = this
				that.$api.includeRemarksList({
					deviceProtectVersionId: that.versionId,
					pageSize:999
				}).then(res => {
					that.tableList = res.data.rows
					console.log(that.tableList, 'this.tableList')
				})
			},
			async signatureImg(img) {
				this.signature = img
				let getavatarUrl = await this.uploadFilePromise(this.signature)
				if (getavatarUrl.showUrl) {
					let that = this
					that.$api.operateRecord({
						deviceId: that.deviceId,
						protectDeviceId: that.protectDeviceId,
						signUrl: getavatarUrl.showUrl
					}).then(res => {
						// console.log(res.data, 'this.getavatarUrl')
					})
				}
				console.log(getavatarUrl.showUrl, 'this.signature')
			},
			uploadFilePromise(avatarUrl) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: `${baseUrl.imgUrl}/common/upload`, // 仅为示例，非真实的接口地址
						filePath: avatarUrl,
						name: 'file',
						formData: {
							user: 'test',
						},
						header: {
							'Authorization': uni.getStorageSync('token')
						},
						success: (res) => {
							// console.log(JSON.parse(res.data),'1111111111111111')
							setTimeout(() => {
								resolve({
									url: JSON.parse(res.data).url,
									showUrl: JSON.parse(res.data).fileName,
								})
							}, 1000)
						},
						fail(fails) {
							console.log(fails, 'fail')
						}
					});
				})
			},
			//签名
			handleSignature() {
				uni.navigateTo({
					url: "/pages/signature/signature"
				})
			},
			//预览
			previewFn() {
				uni.navigateTo({
					url: "/pages/tabBar/pdf/pdf?versionId=" + this.versionId
				})
				return
			},
			toProtect() {
				console.log(this.protectDeviceId,'this.protectDeviceId')
				uni.navigateTo({
					url: '/pages/tabBar/protectDetails/protectDetails?protectDeviceId=' + this.protectDeviceId
				})
			},
			submi() {
				this.sub = true
				this.signature = ''
				//这里提交的时候 先判断是否有签名图片
				if (this.signature) {
					uni.uploadFile({
						success: (res) => {
							//拿到签名图片的服务器地址在上传 懂了撒？
						}
					})
				}
			},
			toTable(i) {
				this.show = true
				console.log(i, 'iiiiiiiii')
				let that = this
				that.$api.getHistory({
					deviceProtectVersionId: i.deviceProtectVersionId,
					serialNo: i.serialNo,
				}).then(res => {
					that.valueList = res.data.data
					console.log(res.data.data, 'this.last_page')
				})

			},
			toRun(i) {
				this.add = ''
				this.remarks = i.remarks
				this.parameterDetailsId = i.id
				console.log(this.remarks, 'remarks',i)
				this.showRun = true
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			lower: function(e) {
				// if (this.form.page < this.last_page) {
				// 	this.form.page = this.form.page + 1

				// 	// this.projectList()
				// }
			},
			upper: function(e) {
				// console.log('到达顶部吧')
			},
			onPulling(e) {
				if (e.detail.deltaY < 0) return // 防止上滑页面也触发下拉
				this.isTriggered = true;
				// console.log("onpulling", e);
			},
			onRefresh() {
				// console.log("自定义下拉刷新被触发");
				// this.closeSel()
				this.isTriggered = false;
			},
			// 选择系列
			tabChange(e) {
				this.typeId = e
				this.list = []
				this.page = 1
				this.isText = ''
				// this.getOrderList()
			},
			// 获取列表
			getOrderList() {
				let that = this
				that.$api.detailsList({
					page: that.page,
					typeId: that.typeId,
					state: 1
				}).then(res => {
					res.data.rows.length == 0 ? that.isText = '暂无数据' : that.isText = ''
					// that.list = that.list.concat(res.data.rows)
					// that.list = 
					that.last_page = Math.ceil(res.data.rows.length / res.data.total)
					// console.log(this.last_page, 'this.last_page')
				})
			},
			// 点击提货
			pickUpGoods(el) {
				let that = this
				uni.showModal({
					title: "确定是否提货",
					success: function(res) {
						if (res.confirm) {
							that.$api.orderTh({
								order_number: el.order_number,
							}).then(res => {
								console.log(res)
								that.goDetails(el)
							})
						} else {
							console.log('用户点击取消');
						}
					}
				});

			},
			// 点击回购
			buyBack(el) {
				let that = this
				uni.showModal({
					title: "确定是否回购",
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							that.$api.orderHg({
								order_number: el.order_number,
							}).then(res => {
								console.log(res)
								that.goDetails(el)
							})
						} else {
							console.log('用户点击取消');
						}
					}
				});
			},

			// 跳转到详情页面
			goDetails(el) {
				let res = {
					order_number: el.order_number,
					goods_img: el.goods_img,
					goods_name: el.goods_name
				}
				uni.navigateTo({
					url: '/pages/order/details/details?res=' + JSON.stringify(res)
				})
			}
		},
		onReachBottom() {
			let that = this
			if (that.page < that.last_page) {
				that.page = that.page + 1
				// that.getOrderList()
			}
		}

	}
</script>

<style lang="less">
	/deep/.u-input__input{
		height: 100%;
	}
	.left {
		top: 3%;
		left: 3%;
		position: fixed;

		image {
			width: 20rpx;
			height: 30rpx;
		}
	}

	.right {
		top: 2.5%;
		right: 3%;
		position: fixed;
		display: flex;
		color: #979797;
		font-size: 24rpx;
	}

	.textName {
		top: 2%;
		left: 42%;
		position: fixed;
		color: #000;
		font-size: 30rpx;
	}
	.small1{
		border: transparent !important;
		display: flex;
		padding: 20rpx;
		text-align: center;
		width: 100% !important;
		background: url(@/static/home/Mask.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}
	page {
		background-color: #fbfafa;
	}

	.butt {
		position: absolute;
		bottom: 40rpx;
		left: 5%;
		width: 90%;
		height: 80rpx;
		text-align: center;
		margin: 0 auto;
		background: #469D96;
		color: #fff;
		border-radius: 10rpx;
		line-height: 80rpx;

	}

	.u-tab-bar {
		display: none !important;
	}

	.big {
		border: transparent !important;
		margin: 20rpx;
		width: 94% !important;

		.u-tr {
			height: 90rpx !important;
			line-height: 90rpx !important;
		}

		.u-td,
		.u-th {
			border-right: transparent !important;
			color: #979797;
		}

		.u-td {
			color: #000 !important;
		}
	}

	.u-modal {
		background: url(@/static/home/Mask.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.small {
		border: transparent !important;
		padding: 20rpx;
		width: 100% !important;
		background: url(@/static/home/Mask.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;

		.u-tr {
			
			height: 140rpx !important;
			// line-height: 140rpx !important;
					box-sizing: border-box;
		}

		.u-td,
		.u-th {
			border-right: transparent !important;
			background-color: transparent !important;
		}

		.u-td {
			color: #979797 !important;
		}
	}

	.list {
		width: 100%;
		height: auto;
		padding: 20rpx;
		border-radius: 20rpx;
		background-color: #fff;
		margin: 20rpx auto;

		.rece {
			width: 22%;
			height: 60rpx;
			background: #979797;
			color: #fff;
			text-align: center;
			line-height: 60rpx;
			border-radius: 6rpx;
			margin-top: 80rpx;
		}

		.list_b {
			font-size: 28rpx;
			font-weight: 400;
			color: #7F8084;
			padding-top: 30rpx;

			.text {
				.money {
					display: inline-block;
					font-size: 32rpx;
					font-weight: 600;
					color: #000;
				}
			}
		}

		.btnBox {
			width: 100%;
			margin-top: 30rpx;
			flex-direction: row-reverse !important;

			.btn {
				width: 132rpx;
				height: 46rpx;
				line-height: 46rpx;
				border-radius: 46rpx;
				text-align: center;
				background-color: #000;
				color: #fff;
				font-size: 24rpx;
				font-weight: 500;
			}
		}

	}

	.serchView {
		width: 100%;
		height: 120rpx;
		display: flex;
		flex-direction: column;
		background-color: #FFFFFF;
		align-items: center;
		justify-content: center;
	}

	.serch {
		width: 690rpx;
		height: 80rpx;
		background: #F7F7F7;
		border-radius: 20rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.serchIconImage {
		width: 32rpx;
		height: 32rpx;
		margin-left: 30rpx;
	}

	.serchInput {
		height: 70rpx;
		width: 600rpx;
		margin-left: 12rpx;
		font-size: 30rpx;
		color: #000000;
	}

	.chooseCup {
		margin-right: 8rpx !important;

		image {
			width: 20rpx !important;
			height: 12rpx !important;
			margin: 14rpx;
		}
	}

	.order {
		width: 100vw;

		.tabBox {
			width: 100%;
			// height: 100rpx;
		}

		.listBox {
			position: absolute;
			top: 4%;

			width: 100%;
			margin: 30rpx 0;

			// padding: 0 30rpx;
			// background: rebeccapurple;
			// height: 600rpx;
			.list {
				width: 94%;
				height: auto;
				padding: 20rpx 30rpx;
				border-radius: 20rpx;
				background-color: #fff;
				margin: 30rpx 20rpx;

				.code {
					color: #000;
					font-weight: 400;
					font-size: 12px;
					line-height: 80rpx;
					height: 80rpx;

					// margin-bottom: 10rpx;
					.title {
						width: 36%;
					}

					.content {
						width: 63%;
						color: #979797;
						white-space: nowrap;
						overflow: hidden;
						text-align: right;
						text-overflow: ellipsis;

					}
				}

				.line {
					width: 100%;
					height: 2rpx;
					background: #f0f0f0;
					margin: 0 auto;
				}

				.list_b {
					font-size: 28rpx;
					font-weight: 400;
					color: #7F8084;
					padding-top: 30rpx;

					.text {
						.money {
							display: inline-block;
							font-size: 32rpx;
							font-weight: 600;
							color: #000;
						}
					}
				}

				.btnBox {
					width: 100%;
					margin-top: 30rpx;
					flex-direction: row-reverse !important;

					.btn {
						width: 132rpx;
						height: 46rpx;
						line-height: 46rpx;
						border-radius: 46rpx;
						text-align: center;
						background-color: #000;
						color: #fff;
						font-size: 24rpx;
						font-weight: 500;
					}
				}

			}
		}
	}
</style>